<template>
  <div>
    <van-row @click="openModal">
      <van-col span="6"><img :src="avatarSrc" alt=""/></van-col>
      <van-col span="10">{{ nickName }}</van-col>
      <van-col span="8">
        <van-icon name="arrow" />
      </van-col>
    </van-row>
    <van-grid :column-num="3" square>
      <van-grid-item icon="photo-o" text="文字" @click="iconClick" />
      <van-grid-item icon="photo-o" text="文字" @click="iconClick" />
      <van-grid-item icon="photo-o" text="文字" @click="iconClick" />
      <van-grid-item icon="photo-o" text="文字" @click="iconClick" />
    </van-grid>
    <div class="login_modal" v-if="showModal">
      <!--外层套一个盒子专门做点击事件-->
      <!--模块化布局必须要加一个背景层-->
      <section @click="closeModal"></section>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { GoLogin } from "../request/api";

export default {
  data() {
    return {
      avatarSrc: require("../assets/images/avatar.png"),
      username: "",
      password: "",
      //   模块框的
      showModal: false,
      nickName: "点击登录"
    };
  },
  created() {
    //   每次进入user页面，就直接判断有没有token，如果有就获取userInfo来渲染
    let token = localStorage.getItem("token");
    if (token) {
      let userInfo = localStorage.getItem("newUserInfo");
      //  转化成一个对象
      let newUserInfo = JSON.parse(userInfo);
      this.avatarSrc = newUserInfo.avatar;
      this.nickName = newUserInfo.username;
    }
  },
  methods: {
    onSubmit(value) {
      GoLogin({
        username: this.username,
        pwd: this.password
      }).then(res => {
        if (res.errno == 0) {
          // 解构赋值
          let { token, userInfo } = res.data;
          let newUserInfo = JSON.stringify(userInfo);
          // 存储在本地
          localStorage.setItem("token", token);
          localStorage.setItem("newUserInfo", newUserInfo);
          this.$toast.success("登录成功");
          //   修改头像和用户昵称
          this.avatarSrc = userInfo.avatar;
          this.nickName = userInfo.username;
          setTimeout(() => {
            this.showModal = false;
          }, 1000);
        }
      });
    },
    //   关闭模块框
    closeModal() {
      this.showModal = false;
    },
    // 点击打开模态框
    openModal() {
      // 判断
      let token = localStorage.getItem("token");
      if (token) {
        // 可以进入用户界面（暂时没写）
        return;
      } else {
        this.showModal = true;
      }
    },
    iconClick(){
        this.$toast('该功能暂未开放')
    }
  }
};
</script>
<style lang="less" scoped>
.van-row {
  padding: 20px 4%;
  background: #333;
  color: #fff;
  .van-col {
    line-height: 80px;
    font-size: 16px;
    img {
      width: 80px;
      border-radius: 50%;
      display: block;
    }
    &:last-child {
      text-align: right;
    }
  }
}
.login_modal {
  width: 100%;
  height: 82vh;
  position: absolute;
  z-index: 99;
  section {
    width: 100%;
    height: 82vh;
    background: rgba(0, 0, 0, 0.5);
  }
  .van-form {
    width: 90%;
    position: absolute;
    top: 20vh;
    left: 18px;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
  }
}
</style>
